<template>
	<!-- 充值 -->
	<view class="content display  displayColumn width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">零钱充值</text>
			</template>
		</u-navbar>
		<view class="fn_content display  displayColumn fontSize font_comm width-100 all_item">
			<!-- 微信 -->
			<view class="fn_weixins display  displayColumn width-699 fontSize font_comm displaycenter_jus M-T26 ">
				<view class="fn_weixins_one display  displaycenter_aliem">
					<span class="wode1 M-L24">选择输入金额</span>
				</view>
				<view class="fn_weixins_two display  displaycenter_aliem M-T26">
					<span class="fn_txt2 M-L24">￥</span>
					<input type="text" placeholder-class="wode_input" class="input" placeholder="请输入充值金额"
						v-model="cashMoney" />
				</view>
				<!-- 线 -->
				<view class="fn_line M-L24 M-T20"></view>
				<view class="fn_weixins_three display  displaycenter_aliem M-T24">
					<span class="fn_txt3 M-L24">最少充值金额50</span>
				</view>
			</view>
			<!-- 选择套餐充值 -->
			<view class="taochan display  displayColumn width-100 ">
				<span class="fn_ttx1 M-L30 M-T36">推荐使用套餐充值</span>
				<view class="taocan1 display  width-100 ">
					<view class="one display  displayColumn"
						:style="{border:selectIndex==0?'2rpx solid #126BC9' :'none'}" 
						:key="index" style="margin-left: 30rpx;margin-top: 30rpx;" @click="taocancongzhi">
						<!-- <view class="yangshi "> -->
							<!-- <span class="fn_ttx2"></span> -->
						<!-- </view> -->
						<view class="fn_one display  width-100 " style="margin-top: 20rpx;">
							<span class="fn_ttx3 ml20">套餐充值</span>
						</view>
						<view class="fn_two display  width-100" style="margin-top: 12rpx;">
							<span class="fn_ttx4 ml20">套餐充值更优惠</span>
						</view>
						
					</view>
				</view>
				
				
				<view class="taocan1 display  width-100 " v-if="false">
					<view class="one display  displayColumn"
						:style="{border:selectIndex==index?'2rpx solid #126BC9' :'none'}" 
						:key="index" style="margin-left: 30rpx;margin-top: 30rpx;" @click="selectIndex=index">
						<view class="yangshi ">
							<span class="fn_ttx2">套餐{{index+1}}</span>
						</view>
						<view class="fn_one display  width-100 " style="margin-top: 20rpx;">
							<span class="fn_ttx3 ml20">新用户体验【D类洗车券】</span>
						</view>
						<view class="fn_two display  width-100" style="margin-top: 12rpx;">
							<span class="fn_ttx4 ml20">供摩卡兄弟新用户体验使用，可自动洗车一次或自助洗车免费20分钟，D类洗车券有效期30天；</span>
						</view>
						<view class="fn_three display  all_item" style="margin-top: 16rpx;">
							<span class="fn_ttx5">
								￥<span style="font-size: 44rpx;">29</span>
							</span>
							<span class="fn_ttx6">
								￥<span>59</span>
							</span>
							<view class="fn_money display  all_item" style="margin-left: 100rpx;">
								<span>1张</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 微信支付 -->
			<view class="weixinzhifu display   width-100 all_item displayColumn M-T-30" style="margin-top: 30rpx;">
				<view class="weixinzhifu_one display  displaycenter_aliem">
					<image
						src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/04/32497fa33c95454a981d6d9671886bb3.png"
						class="image M-L24" mode=""></image>
					<span class="fn_ttx6 M-L20">微信支付</span>
					<view class="fn_circle display  all_item" style="margin-left: 426rpx;">
						<view class="fn_circle_1">

						</view>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="fn_btn display  width-100 all_item" style="margin-top: 80rpx;">
				<button class="fn_nnv1" @click="submit">确定充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex: 0,
				cashMoney:'',//提现金额
			}
		},
		methods: {
			// 套餐充值
			taocancongzhi(){
				uni.navigateTo({
					url: '/pages/coupon/buyCoupon'
				})
			},
			submit(){
				if(this.cashMoney == ''){
					this.$modal.msg('请输入金额')
					return
				}
				if(this.cashMoney < 50){
					this.$modal.msg('最小充值金额为50')
					return
				}
				this.$modal.loading('请耐心等待');
				let data = {
					balance:Number(`${this.cashMoney}`)
				};
				console.log(data)
				this.$req.post('/pay/balance',data).then(res=>{
					console.log(res)
					if (res.data.code == 200) {
						var info = res.data.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timeStamp + '',
							nonceStr: info.nonceStr,
							package: info.packages,
							signType: info.signType,
							paySign: info.paySign,
							success: res => {
								uni.showToast({
									title: '支付成功'
								})
								this.$modal.closeLoading();
							},
							fail: (err) => {
								
								this.$modal.closeLoading();
							},
							complete() {
								this.$modal.closeLoading();
							}
						});
						}else{
							this.$modal.msg(res.data.msg)
							this.$modal.closeLoading()
						}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {}
	.fn_weixins {
		width: 690rpx;
		// height: 256rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.wode1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.ml20 {
		margin-left: 20rpx;
	}
	.fn_txt2 {
		font-weight: 600;
		font-size: 52rpx;
		color: #000000;
	}
	.wode_input {
		font-weight: 400;
		font-size: 40rpx;
		color: #72778A;
		text-align: left;
	}
	.input {
		text-align: left;
	}
	.fn_txt3 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_line {
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}
	.fn_ttx1 {
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
		text-align: left;
	}
	.one {
		width: 336rpx;
		// height: 256rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

	}
	.yangshi {
		// position: absolute;
		// left: 8rpx;
		// top: -10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15%;
		width: 114rpx;
		height: 32rpx;
		background: #C69670;
	}
	.fn_ttx2 {
		font-weight: 600;
		font-size: 20rpx;
		color: #FFFFFF;
		// position: absolute;
		// right: 30rpx;
	}
	.fn_ttx3 {
		font-weight: 600;
		font-size: 24rpx;
		color: #000000;
	}
	.fn_ttx4 {
		font-weight: 400;
		font-size: 20rpx;
		color: #72778A;
		width: 294rpx;
		text-align: left;
	}
	.fn_ttx5 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_ttx6 {
		font-weight: 400;
		font-size: 24rpx;
		color: #8F8F8F;
		// text-decoration: line-through;
	}
	.fn_money {
		width: 66rpx;
		height: 50rpx;
		background: rgba(23, 105, 143, 0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid;
		border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}
	.taocan1 {
		flex-wrap: wrap;
	}
	.weixinzhifu {}
	.weixinzhifu_one {
		width: 690rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.image {
		width: 40rpx;
		height: 40rpx;
	}
	.fn_ttx6 {
		font-weight: 600;
		font-size: 30rpx;
		color: #000000;
	}
	.fn_circle {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border:1rpx solid #126BC9;
	}

	.fn_circle_1 {
		width: 24rpx;
		height: 24rpx;
		background: #126BC9;
		border-radius: 50%;
		text-decoration: none;
	}

	.fn_nnv1 {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>